import React, { PureComponent } from 'react';
import { Form } from '@ant-design/compatible';
import '@ant-design/compatible/assets/index.css';
import { Input, Modal, Row, Col, DatePicker } from 'antd';
import moment from 'moment';

const { MonthPicker } = DatePicker;
const FormItem = Form.Item;

class UpdateChare extends PureComponent {
  onDataChange = (data, dateString, index, item) => {
    const { onDataChange } = this.props;
    const values = { id: item.id, dateString };
    onDataChange(values);
  };

  // 时间禁用
  disabledDate = (disDate, current) => {
    const endDate = moment(disDate)
      .add('year', 0)
      .month(moment(disDate).month() - 1)
      .format('YYYY-MM');

    return current && current < moment(endDate).endOf('day');
  };

  // 提交数据
  submitChareData = () => {
    const { submitChareData, form } = this.props;

    form.validateFields((err, values) => {
      if (!err) {
        submitChareData(values);
      }
    });
  };

  render() {
    const {
      form: { getFieldDecorator },
      chareVisible,
      pdChargeData,
      insMergFlag,
      handleModalChareVisible,
      subLoading,
    } = this.props;

    const tableSearchLayout2 = {
      labelCol: {
        xl: {
          span: 3,
        },
      },
      wrapperCol: {
        lg: {
          span: 21,
        },
      },
    };
    const tableSearchLayout1 = {
      labelCol: {
        xl: {
          span: 9,
        },
      },
      wrapperCol: {
        lg: {
          span: 15,
        },
      },
    };
    const tableSearchLayout = {
      labelCol: {
        xxl: {
          span: 7,
        },
        xl: {
          span: 9,
        },
        lg: {
          span: 10,
        },
        md: {
          span: 10,
        },
      },
      wrapperCol: {
        xxl: {
          span: 17,
        },
        lg: {
          span: 15,
        },
        md: {
          span: 10,
        },
      },
    };
    const renderDom = (item, index) => (
      <Row key={index} style={{ marginBottom: 6, marginTop: 6 }}>
        <Col span={5}>
          <FormItem label={<span>产品</span>} {...tableSearchLayout1}>
            {getFieldDecorator(
              `entryDets[${index}][${item.pdCate ? `pdCate_${item.pdCate}` : `ass_${item.ass}`}]`
            )(<span style={{ display: 'inline-block' }}>{item.pdName}</span>)}
          </FormItem>
        </Col>
        <Col span={19}>
          <FormItem label={<span> 业务开始日期</span>} {...tableSearchLayout}>
            {getFieldDecorator(`entryDets[${index}][sendBeginDate]`, {
              rules: [{ required: true, message: '请选择业务开始日期' }],
              initialValue: item.sendBeginDate ? moment(item.sendBeginDate, 'YYYY-MM') : null,
            })(
              <MonthPicker
                placeholder="请选择"
                format="YYYY-MM-01"
                style={{ width: '100%' }}
                onChange={(data, dateString) => this.onDataChange(data, dateString, index, item)}
                disabled={!!(item.assDisabled || Number(item.openFlag) === 2)}
                disabledDate={
                  item.sendBeginDate
                    ? current => this.disabledDate(item.sendBeginDate, current)
                    : null
                }
              />
            )}
          </FormItem>
        </Col>
      </Row>
    );

    return (
      <Modal
        title="修改信息"
        visible={chareVisible}
        okText="保存"
        cancelText="取消"
        onOk={this.submitChareData}
        confirmLoading={subLoading}
        onCancel={() => handleModalChareVisible(false)}
        destroyOnClose
      >
        <Form>
          {insMergFlag === 2
            ? pdChargeData &&
              pdChargeData.length &&
              pdChargeData.map((item, index) => {
                if (+item.ass !== 1) {
                  return renderDom(item, index);
                }
                return true;
              })
            : pdChargeData &&
              pdChargeData.length &&
              pdChargeData.map((item, index) => {
                if (+item.ass === 1 || +item.ass === 2) {
                  return renderDom(item, index);
                }
                return true;
              })}

          <Row>
            <Col span={24}>
              <FormItem label={<span>备注</span>} {...tableSearchLayout2}>
                {getFieldDecorator('content', {
                  rules: [{ required: true, message: '请填写修改原因' }],
                })(<Input />)}
              </FormItem>
            </Col>
          </Row>
        </Form>
      </Modal>
    );
  }
}
export default Form.create()(UpdateChare);
